<template>
  <div style="padding: 12px 12px 0">
    <div v-show="list.length>1 && $store.state.views.showCrumbs" class="c-header-crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-for="(l,i) in list" :key="i" :to="l">{{ l.title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button @click="goBack">返回</el-button>
    </div>
    <keep-alive :include="includes">
      <router-view :key="$route.fullPath" :name="name" />
    </keep-alive>
  </div>
</template>
<script>
import { findChildComponent } from '@/utils'
export default {
  name: 'CRouterViewBreadcrumd',
  components: {
  },
  props: {
    name: {
      type: String,
      default: 'default'
    }
  },
  computed: {
    list() {
      return this.$store.state.views.queueList
    },
    includes() {
      // if(this.$store.state.views.queueList)
      const queueList = this.$store.state.views.queueList.map(e => e.name)
      return [...this.$store.state.views.keepAliveList, ...queueList]
    }
  },
  methods: {
    goBack() {
      const curRoute = this.$route
      const isVerify = (curRoute.meta || {}).isVerify
      const route = this.list[this.list.length - 2]
      if (isVerify !== undefined) {
        const com = findChildComponent(this.$children, curRoute.name)
        if (com && com.isVerify && com.isVerify instanceof Function) {
          const result = com.isVerify(curRoute, route)
          if (result instanceof Promise) {
            result.then(() => {
              this.push(route)
            })
          } else if (result) {
            this.push(route)
          }
        }
      } else {
        this.push(route)
      }
    },
    push(route) {
      this.$router.push(route)
      // const query = route.query || {}
      // if (query._backClose !== undefined) {
      //   window.parent.postMessage({
      //     flag: 'closetag'
      //   }, '*')
      // } else {
      //   this.$router.push(route)
      // }
    }
  }
}
</script>
<style lang="scss">
.c-header-crumbs{
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .el-breadcrumb__inner{
    color: #3dc094;
    font-size: 12px;
  }
}
</style>
